<template>
  <div class="app-container">
    <el-table border :data="tableData" stripe style="width: 100%" :header-cell-style="{ background: '#EDF6FF' }">
      <el-table-column align="center" prop="title" label="功能点"></el-table-column>
      <el-table-column align="center" prop="common" label="免费版"></el-table-column>
      <el-table-column align="center" prop="vip" label="会员版"></el-table-column>
    </el-table>
    <el-table
      class="vip"
      border
      :data="vipTableData"
      stripe
      style="width: 100%"
      :header-cell-style="{ background: '#EDF6FF' }"
    >
      <el-table-column align="center" prop="type" label="会员类型"></el-table-column>
      <el-table-column align="center" prop="price" label="会员价格">
        <template slot-scope="{ row }">
          <span class="red">{{ row.price }}元</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="wx-qrcode">
      <img class="full" src="@/assets/images/qr.jpg" alt srcset />
      <div class="text-center fs-md">扫码联系客服购买会员</div>
    </div>
  </div>
</template>

<script>
import { getMemberPowerList, getMembershipCard } from "@/api/user";
export default {
  data() {
    return {
      tableData: [
        { title: "录入房源", vip: "支持", common: "支持" },
        { title: "小程序卡片分享", vip: "支持", common: "支持" },
        { title: "朋友圈分享", vip: "支持", common: "支持" },
        { title: "海报分享", vip: "支持", common: "支持" },
        { title: "VR分享", vip: "支持", common: "支持" },
        { title: "访客记录", vip: "支持", common: "支持" },
        { title: "获取访客电话", vip: "支持", common: "支持" },
        { title: "访客分析", vip: "支持", common: "支持" },
        { title: "个人店铺", vip: "支持", common: "支持" },
        { title: "微信房源", vip: "不限量", common: "不限量" },
      ],
      vipTableData: [],
    };
  },

  created() {
    getMemberPowerList().then(({ content }) => {
      let list = content.rows.map((item) => {
        return {
          title: item.menuName,
          vip: this.getVipTips(item.memberDayVerify, item.memberDayNumber, item.memberTotalVerify, item.memberTotalNumber),
          common: this.getCommonTips(item.dayVerify, item.dayNumber, item.totalVerify, item.totalNumber)
        };
      });

      this.tableData = list.concat(this.tableData);
    });

    getMembershipCard().then(({ content }) => {
      this.vipTableData = content.map((item) => {
        return {
          type: item.packageName,
          price: item.price,
        };
      });
    });
  },

  methods: {
    getVipTips(dVer, dNum, tVer, tNum) {
      let day = dVer ? `${dNum}次/天` : "";
      let total = tVer ? `总${tNum}次` : "不限总量";
      
      if (!day && total == "不限总量") {
        return "不限量";
      } else {
        return [day, total].join(" ");
      }
    },

    getCommonTips(dVer, dNum, tVer, tNum) {
      if (tVer && tNum <= 0) {
        return "不支持";
      }
      
      if (tVer && tNum > 0) {
        if (dVer && dNum > 0) {
          return dNum == tNum ? `${tNum}次` : `${dNum}次/天 总${tNum}次`;
        }
        return `${tNum}次`;
      }

      return '不限量'
    },
  },
};
</script>

<style lang="scss" scoped>
.vip {
  margin-top: 30px;
}
.red {
  color: #ff4b4b;
  font-weight: bold;
}
.wx-qrcode {
  width: 200px;
  height: 200px;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 80px;
}
.bottom-box {
}
</style>
